<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2021-10-11 13:41:38
 * @LastEditTime: 2022-04-12 12:58:07
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="el-pag">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="page"
      :page-size="pagination.pagesize"
      :layout="layout"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    Page: {
      type: Number
    },
    Size: {
      type: Number
    },
    pageSize: {
      type: Array,
      default: () => {
        return [15, 50, 100, 200]
      }
    },
    Total: {
      type: Number,
      requied: true
    },
    Layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  data() {
    return {
      layout: this.Layout,
      page: this.pageSize,
      pagination: {
        currentPage: this.Page || 1,
        pagesize: this.Size || this.pageSize[0]
      },
      total: this.Total
    }
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      this.pagination.pagesize = val
      this.pagination.currentPage = 1
      this.getData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.getData()
    },
    getData() {
      this.$emit('getData', this.pagination)
    }
  },
  watch: {
    Page() {
      return (this.pagination.currentPage = this.Page)
    },
    Total() {
      return (this.total = this.Total)
    }
  }
}
</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 30px;
}
</style>
